<template>
  <div class='wy-main car-info wei_car_info'>
    <a-form :form="form" @submit="handleSubmit" class="wy-form" >
                    <a-row type="flex"  align="middle" class="wei_margin_bottom">
                 <a-col :span="14">
                  <div class="auth-portrait">
                        <img :src="header_img" />
                      </div>
                    </a-col>
                  </a-row>
                <a-row type="flex"  align="middle" class="wei_margin_bottom">
                    <a-col :span="12" style="margin-left:14px;"><p class="height-100" style='margin-right: 12px; text-align: right;'>用户身份：</p></a-col>
                    <a-col :span="6"><p class="height-100">{{detail.type==1?'个人用户':'企业用户'}}</p></a-col>
                </a-row>
     <a-tabs >
          <a-tab-pane tab="基本信息" key="1" >

                <a-row type="flex"  align="middle" class="wei_margin_bottom">
                    <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;color:#333;font-weight:bold;'>登录名：</p></a-col>
                    <a-col :span="6"><p class="height-100">{{detail.username}}</p></a-col>
                    <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;color:#333;font-weight:bold;'>手机号：</p></a-col>
                    <a-col :span="6"><p class="height-100">{{detail.mobile}}</p></a-col>
                </a-row>
                <a-row type="flex"  align="middle" class="wei_margin_bottom">
                    <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;color:#333;font-weight:bold;'>公司名称：</p></a-col>
                    <a-col :span="6"><p class="height-100">{{detail.company}}</p></a-col>
                    <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;color:#333;font-weight:bold;'>主营业务：</p></a-col>
                    <a-col :span="6"><p class="height-100">{{detail.mainBusiness}}</p></a-col>
                </a-row>
                    <a-row type="flex"  align="middle" class="wei_margin_bottom">
                    <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;'>网址：</p></a-col>
                    <a-col :span="6"><p class="height-100">{{detail.companyWebsite}}</p></a-col>
                    <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;'>电子邮箱：</p></a-col>
                    <a-col :span="6"><p class="height-100">{{detail.email}}</p></a-col>
                </a-row>
                <a-row type="flex"  align="middle" class="wei_margin_bottom">
                    <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;'>国家地区：</p></a-col>
                    <a-col :span="6"><p class="height-100">{{country}}</p></a-col>
                    <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;'>所在地区：</p></a-col>
                    <a-col :span="6" v-if="province"><p class="height-100">{{province+' '+city}}</p></a-col>
                </a-row>
              <a-row type="flex"  align="middle" class="wei_margin_bottom">
                    <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;'>街道地址：</p></a-col>
                    <a-col :span="6"><p class="height-100">{{detail.address}}</p></a-col>
                    <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;'>移动电话：</p></a-col>
                    <a-col :span="6"><p class="height-100">{{detail.mobile}}</p></a-col>
                </a-row>
                <a-row type="flex"  align="middle" class="wei_margin_bottom">
                    <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;'>固定电话：</p></a-col>
                    <a-col :span="6"><p class="height-100">{{detail.landline}}</p></a-col>
                    <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;'>传真：</p></a-col>
                    <a-col :span="6"><p class="height-100">{{detail.fax}}</p></a-col>
                </a-row>
                <a-row type="flex"  align="middle" class="wei_margin_bottom">
                    <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;'>QQ：</p></a-col>
                    <a-col :span="6"><p class="height-100">{{detail.qq}}</p></a-col>
                    <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;'>微信：</p></a-col>
                    <a-col :span="6"><p class="height-100">{{detail.wechat}}</p></a-col>
                </a-row>
                <a-row type="flex"  align="middle" class="wei_margin_bottom">
                    <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;'>用户状态：</p></a-col>
                    <a-col :span="6" style="margin-top:-13px;"> 
                          <a-radio-group  disabled v-model="status" ><a-radio :value="1">有效</a-radio><a-radio :value="0">禁用</a-radio></a-radio-group>
                    </a-col>
                    <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;'>角色：</p></a-col>
                    <a-col :span="6"><p class="height-100">{{detail.roleName}}</p></a-col>
                </a-row>
            </a-tab-pane>
            <a-tab-pane tab="认证信息" key="2" >
                <a-row type="flex"  align="middle" class="wei_margin_bottom">
                    <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;'>证件类型：</p></a-col>
                    <a-col :span="6" v-if="detail.certificatesType==9"><p class="height-100">身份证</p></a-col>
                    <a-col :span="6" v-if="detail.certificatesType==10"><p class="height-100">护照</p></a-col>
                    <a-col :span="6" v-if="detail.certificatesType!=9||detail.certificatesType!=10"><p class="height-100"></p></a-col>
                    <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;'>证件号码：</p></a-col>
                    <a-col :span="6"><p class="height-100">{{detail.certificatesNo}}</p></a-col>
                </a-row>
                <a-row type="flex"  align="middle" class="wei_margin_bottom">
                    <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;'>身份证图片：</p></a-col>
                        <div style="margin-left:25%;width:100%;">
                          <a-col :span="8" v-if="card1"><p class="height-100"><img style="width:150px;height:150px;" :src="card1" alt=""></p></a-col>
                           <a-col :span="8" v-if="card2"><p class="height-100"><img style="width:150px;height:150px;" :src="card2" alt=""></p></a-col>
                        </div>

                </a-row>
                  <a-row type="flex"  align="middle" class="wei_margin_bottom">
                    <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;'>荣誉/资质图片：</p></a-col>
                        <div style="margin-left:25%;width:100%;">
                           <a-col :span="8" v-for="(item,index) in list" :key="index"><p class="height-100"><img style="width:150px;height:150px;" :src="item.qual_img" alt=""></p></a-col>
                        </div>

                </a-row>
                </a-row>
            </a-tab-pane>
            <a-tab-pane tab="活跃度" key="3" >
                <a-row type="flex"  align="middle" class="wei_margin_bottom">
                    <a-col :span="12"><p class="height-100" style='margin-right: 12px; text-align: right;color: #333;font-size: 16px;font-weight: bold;'>月度登录次数：</p></a-col>
                    <a-col :span="6"><p class="height-100">105次</p></a-col>

                </a-row>
                <a-row type="flex"  align="middle" class="wei_margin_bottom">
                    <a-col :span="12"><p class="height-100" style='margin-right: 12px; text-align: right;color: #333;font-size: 16px;font-weight: bold;'>月度业务信息发布数量：</p></a-col>
                    <a-col :span="6"><p class="height-100">1000</p></a-col>

                </a-row>
                    <a-row type="flex"  align="middle" class="wei_margin_bottom">
                    <a-col :span="12"><p class="height-100" style='margin-right: 12px; text-align: right;color: #333;font-size: 16px;font-weight: bold;'>月度浏览足迹：</p></a-col>
                    <a-col :span="6"><p class="height-100">2000</p></a-col>

                </a-row>
            </a-tab-pane>
        </a-tabs>
         
      <div class="ant-row ant-form-item">
        <div class="ant-col-10 ant-form-item-label"></div>
        <div class="ant-col-10 ant-form-item-control-wrapper">
          <div class="ant-form-item-control">
            <span class="ant-form-item-children">
              
              <a-button type="primary"  html-type="submit" >
               关闭
              </a-button>

        <!--       <a-button @click="cancel()">
                取消
              </a-button> -->
              
            </span>
          </div>
        </div>
      </div>
      
    </a-form>
  </div>
</template>
<script>
  import { environment } from '@/environments/environment'
  export default {
    props: ['detail'],
    data() {
      return {
        status:'',
        header_img:'',
        countryList:[],
        provinceList:[],
        cityList:[],
        country:'',
        province:'',
        city:'',
        card1:'',
        card2:'',
        list:[],
        uploadUrl: environment.FileUploadUrl+'/fileupload/upload',// 图片上传地址
        FileUploadUrl2:environment.FileUploadUrl2,
        formItemLayout: {
          labelCol: {
            xs: {
              span: 24
            },
            sm: {
              span: 4
            },
          },
          wrapperCol: {
            xs: {
              span: 24
            },
            sm: {
              span: 12
            },
          },
        },
      }
    },
    beforeCreate() {
      this.form = this.$form.createForm(this);
     
    },
    created() {
       this.gitArea()
       this.getProvince()
       this.getCity()
      if(this.detail){
        let d = this.detail
        this.header_img = '../../static/avatar/'+d.avatar
         this.status = parseInt(d.status)
         if(d.cardPicFacePath){
          this.card1 = this.FileUploadUrl2+d.cardPicFacePath+d.cardPicFace;
         }

         if(d.cardPicAddrPath){
          this.card2 = this.FileUploadUrl2+d.cardPicAddrPath+d.cardPicAddr;
         }

          if(d.qualificationsPath){
              let qualArr = d.qualificationsPath.split(',');

              let qualifiArr = d.qualificationsJpg.split(',');

              for(var i=0;i<qualArr.length;i++){

                this.list.push({
                  qual_img:this.FileUploadUrl2+qualArr[i]+qualifiArr[i]
                })
              }
          }

         
        
      }
    
    },

    mounted: function() {

    },
    methods: {

      cancel(){
         this.$emit('cancel');
      },
      // 获取国家地区
      gitArea(){
        var val = {upid:0}
        this.$get('/info/area',val).then((r) => {
          this.countryList = r.data.data
          if(this.countryList&&this.countryList.length){
            for(var i=0;i<this.countryList.length;i++){
              if(this.countryList[i].areaId == this.detail.country){
                this.country = this.countryList[i].name
                return;
              }
            }
          }
              }).catch((e) => {})
      },
      // 获取省级区域
      getProvince(){
        
          var val = {upid:this.detail.country}
        this.$get('/info/area',val).then((r) => {
          this.provinceList = r.data.data

          for(var i=0;i<this.provinceList.length;i++){
             if(this.provinceList[i].areaId == this.detail.province){
                this.province = this.provinceList[i].name
                return
              }
          }
              }).catch((e) => {})
      },
      // 获取省级区域
      getCity(){
        
          var val = {upid:this.detail.province}
        this.$get('/info/area',val).then((r) => {
          this.cityList = r.data.data

          for(var i=0;i<this.cityList.length;i++){
             if(this.cityList[i].areaId == this.detail.city){
                this.city = this.cityList[i].name
                return
              }
          }
              }).catch((e) => {})
      },

    
      //认证提交
      handleSubmit(e) {
   
        e.preventDefault();
        this.$emit('cancel');
      },
    },
  }
</script>

<style lang="less" scoped>
         .pass-auth{
            margin-top: 10px;
            span{
                background: #dddddd;
                width: 100px;
                height: 6px;
                display: inline-block;
                margin-right: 10px;
            }
            a{
                color: #dddddd;
                font-size: 18px;
                margin-left: 30px;
            }
            span.red{
                background: #FF2F47;
            }
            span.yellow{
                background: #F5B12E;
            }
            span.green{
                background: #15837A;
            }
            a.red{
                color: #FF2F47;
            }
            a.yellow{
                color: #F5B12E;
            }
            a.green{
                color: #15837A;
            }
        }

        .wei_car_info{
          .auth-portrait{
            width: 120px;
            height: 120px;
            margin-right: 20px;
            float: right;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .wei_margin_bottom{
            margin-bottom: 20px;
          }
        }

</style>